<template>
  <div class="userInfo-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本资料</span>
      </div>
      <!-- 修改信息 -->
      <el-form
        label-width="100px"
        class="demo-ruleForm"
        :model="form"
        :rules="rules"
        ref="formRef"
        label-position="left"
      >
        <el-form-item label="原密码" prop="oldpwd">
          <el-input v-model="form.oldpwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd">
          <el-input v-model="form.newpwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repwd">
          <el-input v-model="form.repwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交修改</el-button>
          <el-button @click="doReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'userInfo-page',
  data () {
    return {
      form: {
        oldpwd: '',
        newpwd: '',
        repwd: ''
      },
      rules: {
        oldpwd: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          {
            pattern: /^\w{6,15}$/,
            message: '密码长度必须是6-15位的非空字符串',
            trigger: 'blur'
          }
        ],
        newpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\w{6,15}$/,
            message: '密码长度必须是6-15位的非空字符串',
            trigger: 'blur'
          }
        ],
        repwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\w{6,15}$/,
            message: '密码长度必须是6-15位的非空字符串',
            trigger: 'blur'
          },
          {
            validator: (rule, data, callback) => {
              // rule : 规则  data: 当前的数据  callback回调
              if (this.form.newpwd === this.form.repwd) {
                callback() // 不传参,校验通过
              } else {
                callback(new Error('两次新密码不一致！')) // 传参,校验不通过
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    doReset () {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo-page {
  padding: 80px 20px 0px 220px;

  .demo-ruleForm {
    width: 500px;
  }
}
</style>
